import {
  getBatchPlanAndStageByPage,
  getBatchPlanAndStageByPageAndInfoId,
  countUnAssginProduct,
} from '@/services/project/batchPlan';
import {
  getInfoProgress,
  getErrorReportProgress,
  getInfoByProjectCode,
  getUnReviewedProgress,
} from '@/services/board/projectboard';
import { getWorkOrderInforProgress } from '@/services/board/productboard';

import { updatePayInfo, getProjectTeamInfos, getPayInfoByInfoId } from '@/services/project/info';
import { history } from 'umi';
import { PlusOutlined, ArrowLeftOutlined, RiseOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {
  Button,
  Form,
  message,
  Modal,
  Table,
  Space,
  Input,
  Col,
  Row,
  DatePicker,
  Select,
  Card,
  Tabs,
  Statistic,
} from 'antd';
import { sortTran, filterTran, filterTranNew } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import { Ellipsis } from '@/components/Ellipsis';
import './card_style.less';
import Info from './info';
import ErrorReport from '@/pages/platform/errorReport';
import ReportForm from '@/pages/board/reportForm';
import FileInfo from '@/pages/project/fileInfo';
import MasterPlan from '@/pages/project/masterPlan';
import BatchPlan from '@/pages/project/batchPlan';
import ProduceInfo from '@/pages/project/produceInfo';
import type { tabType, DataType, FeeType } from '@/pages/project/type';
import dayjs from '@/components/dayjs';

import { Pie } from '@ant-design/plots';

const Projectboard: React.FC<{}> = (props) => {
  const actionRef = useRef<ActionType>();
  const [form] = Form.useForm();
  const [formRef] = Form.useForm();
  const [timeRef] = Form.useForm();
  const [editFormRef] = Form.useForm();
  const [selectKeys, setSelectKeys] = useState([]);
  const [batchPlanId, setbatchPlanId] = useState(null);
  const ref = useRef(null);
  const tableRef = useRef(null);
  const [selections, setSelections] = useState([]);
  const [hiddenTemp, setHiddenTemp] = useState(false);
  const [selectedRowKey, setSelectedRowKeys] = useState<React.Key[]>([]);
  const dateFormat = 'YYYY-MM-DD';
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
  const [tempDate, setTempDate] = useState<any[]>();
  const stateType = ['未下发', '设计中', '生产中', '暂停'];
  const batchPlanFlag = props.batchPlanFlag;
  const batchPlanInfoId = props.batchPlanInfoId;

  const [project_process_forcard, setproject_process_forcard] = useState([]);
  const [errordata, setError_data] = useState([]);
  const [wodata_forcard, setwodata_forcard] = useState([]);
  const [current_state, setcurrent_state] = useState(''); //工单状态，是否结束
  const [current_alert, setcurrent_alert] = useState(''); //工单状态，是否正常
  const [unreviewdata, setunreviewdata_forcard] = useState(0);

  const [project_list, setproject_list] = useState(false);
  const [ex_list, setex_list] = useState(false);

  const [state, setstate] = useState('');
  const detailRefs = useRef(null);
  const [batchCount, setBatchCount] = useState<number>(-1);

  //复合框
  const [editModalVisit, setEditModalVisit] = useState(false);
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [feeForm] = Form.useForm();
  const [feeInfo, setFeeInfo] = useState<FeeType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [teamInfo, setTeamInfo] = useState(); //团队信息
  const [infoId, setInfoId] = useState();
  const [teamId, setTeamId] = useState();
  const teamNameRef = useRef(null);
  const onChange = (key: string) => { };
  useEffect(() => {
    history.listen((location) => {
      setEditModalVisit(false);
    });
  }, [history]);
  const [nowCustomer, setNowCustomer] = useState<nowCustom>();
  const [customeCode, setCustomerCode] = useState<customerCodeType[]>();
  type nowCustom = {
    customerName: string;
    customerCode: any;
  };

  type customerCodeType = {
    label: string;
    value: string;
    id?: string;
  };

  //团队信息
  const teamInfoColumns: ColumnsType<DataType> = [
    {
      title: '名称',
      dataIndex: 'userName',
      key: 'userName',
      width: 100,
      align: 'center',
      sorter: true,
    },
    {
      title: '角色',
      dataIndex: 'category',
      key: 'category',
      width: 100,
      align: 'center',
      sorter: true,
    },
    {
      title: '电子邮箱',
      dataIndex: 'email',
      key: 'email',
      width: 100,
      align: 'center',
      sorter: true,
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
      width: 100,
      align: 'center',
      sorter: true,
    },
  ];

  // 查看弹窗的tab页
  const items: tabType[] = [
    {
      key: '0',
      name: 'tab1',
      label: `项目信息`,
      content: (
        <div>
          <Form
            name="wrap"
            labelCol={{ flex: '110px' }}
            labelAlign="left"
            labelWrap
            form={form}
            wrapperCol={{ flex: 1 }}
            colon={false}
            validateTrigger={['onBlur', 'onChange']}
          >
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="id" name="id" hidden={true}>
                  <Input />
                </Form.Item>
                <Form.Item
                  label="合同名称"
                  name="contractName"
                  rules={[{ required: true, message: '请输入合同名称！' }]}
                >
                  <Input disabled={createOrUpdate} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="合同编号"
                  name="contractCode"
                  rules={[{ required: true, message: '请输入合同编号！' }]}
                >
                  <Input disabled={true} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item
                  label="合同日期"
                  name="contractDate"
                  rules={[{ required: true, message: '请输入合同日期！' }]}
                >
                  <DatePicker disabled={createOrUpdate} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="合同金额"
                  name="contractAmount"
                  rules={[
                    { required: true, message: '请输入合同金额！' },
                    {
                      pattern:
                        /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?[\u4e00-\u9fa5]?$)|(^(0){1}[\u4e00-\u9fa5]?$)|(^[0-9]\.[0-9]([0-9])?[\u4e00-\u9fa5]?$)/,
                      message: '格式错误，只保留两位小数!',
                      validateTrigger: ['onBlur', 'onChange'],
                    },
                  ]}
                >
                  <Input disabled={createOrUpdate} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item
                  label="项目名称"
                  name="projectName"
                  rules={[{ required: true, message: '请输入项目名称！' }]}
                >
                  <Input disabled={createOrUpdate} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="项目编号" name="projectCode">
                  <Input disabled={true} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="客户名称" name="customerName">
                  <Select
                    placeholder="请选择客户名称"
                    disabled={createOrUpdate}
                    onChange={(label, value) => {
                      setNowCustomer({ customerName: value.label, customerCode: label });
                      form.setFieldsValue({
                        customerCode: label,
                      });
                    }}
                    options={customeCode}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="客户编号" name="customerCode">
                  <Input disabled />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="客户地址" name="customerAddress">
                  <Input disabled={createOrUpdate} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="联系人" name="contactName">
                  <Input disabled={createOrUpdate} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item label="联系电话" name="contactNo">
                  <Input disabled={createOrUpdate} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="交货地点" name="deliveryAddress">
                  <Input disabled={createOrUpdate} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item
                  label="交货日期"
                  name="deliveryDate" //js jsx+typescript ts Date string 类型校验
                  rules={[{ required: true, message: '请输入交货日期!' }]}
                >
                  <DatePicker disabled={createOrUpdate} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="销售订单号" name="so">
                  <Input disabled={createOrUpdate} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={24}>
                <Form.Item label="备&nbsp;&nbsp;&nbsp;&nbsp;注" name="memo">
                  <Input disabled={createOrUpdate} />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      ),
    },
    {
      key: '7',
      name: 'tab7',
      label: `收款信息`,
      content: (
        <div>
          <Form
            name="wrap"
            labelCol={{ flex: '110px' }}
            labelAlign="left"
            labelWrap
            form={feeForm}
            wrapperCol={{ flex: 1 }}
            colon={false}
            validateTrigger={['onBlur', 'onChange']}
          >
            <div className="fee-title">预付款</div>
            <Row gutter={[50, 0]}>
              <Col span={8}>
                <Form.Item label="id" name="id" hidden={true}>
                  <Input />
                </Form.Item>
                <Form.Item
                  label="时间"
                  name="advancePayDate"
                  rules={[{ required: true, message: '请输入时间！' }]}
                >
                  <DatePicker disabled />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label="金额"
                  name="advancePay"
                  rules={[{ required: true, message: '请输入金额！' }]}
                >
                  <Input disabled />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="比例(%)" name="advancePayRate">
                  <Input disabled />
                </Form.Item>
              </Col>
            </Row>
            <div className="fee-title">阶段款</div>
            <Row gutter={[50, 0]}>
              <Col span={8}>
                <Form.Item label="id" name="id" hidden={true}>
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  label="时间"
                  name="stagePayDate"
                  rules={[{ required: true, message: '请输入时间！' }]}
                >
                  <DatePicker disabled />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label="金额"
                  name="stagePay"
                  rules={[{ required: true, message: '请输入金额！' }]}
                >
                  <Input disabled />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="比例(%)" name="stagePayRate">
                  <Input disabled />
                </Form.Item>
              </Col>
            </Row>
            <div className="fee-title">尾 款</div>
            <Row gutter={[50, 0]}>
              <Col span={8}>
                <Form.Item label="id" name="id" hidden={true}>
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  label="时间"
                  name="finalPayDate"
                  rules={[{ required: true, message: '请输入时间！' }]}
                >
                  <DatePicker disabled />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label="金额"
                  name="finalPay"
                  rules={[{ required: true, message: '请输入金额！' }]}
                >
                  <Input disabled />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="比例(%)" name="finalPayRate">
                  <Input disabled />
                </Form.Item>
              </Col>
            </Row>
            <div className="fee-title" />
            <Row gutter={[50, 0]}>
              <Col span={8}>
                <Form.Item label="id" name="id" hidden={true}>
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  label="是否已开票"
                  name="isInvoice"
                  rules={[{ required: true, message: '请输入是否已开票！' }]}
                >
                  <Select
                    disabled
                    placeholder="请选择是否已开票"
                    onChange={(value, label) => { }}
                    options={[
                      { label: '是', value: '是' },
                      { label: '否', value: '否' },
                    ]}
                  />
                </Form.Item>
              </Col>
              <Col span={16}>
                <Form.Item label="备注" name="contractCode">
                  <Input disabled />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      ),
    },
    {
      key: '2',
      name: 'tab2',
      label: `柜体编辑`,
      content: (
        <div style={{ height: 500 }}>
          <ProduceInfo produceFlag={false} produceInfoId={infoId} />
        </div>
      ),
    },
    {
      key: '3',
      name: 'tab3',
      label: `团队编辑`,
      content: (
        <div className="teamTab3">
          <div className="teamName">
            团队名称：
            <Input
              ref={teamNameRef}
              disabled
              value={teamInfo ? teamInfo.teamName : '-'}
              style={{ width: 300 }}
            />
          </div>
          <div style={{ marginTop: 20 }}>
            团队成员：
            <Table
              columns={teamInfoColumns}
              rowKey={(record) => record.id}
              bordered
              dataSource={teamInfo ? teamInfo.teamInfos : ''}
              pagination={{ pageSize: 4 }}
            />
          </div>
        </div>
      ),
    },
    {
      key: '4',
      name: 'tab4',
      label: `项目主计划`,
      content: (
        <div style={{ height: 500 }}>
          <MasterPlan masterPlanFlag={false} masterPlanInfoId={infoId} masterPlanTeamId={teamId} />
        </div>
      ),
    },
    {
      key: '5',
      name: 'tab5',
      label: `批次计划`,
      content: (
        <div style={{ height: 500 }}>
          <BatchPlan batchPlanFlag={false} batchPlanInfoId={infoId} />
        </div>
      ),
    },
    {
      key: '6',
      name: 'tab6',
      label: `项目附件`,
      content: (
        <div style={{ height: 500, padding: 0 }}>
          <FileInfo infoFlag={false} infosId={infoId} teamsId={teamId} />
        </div>
      ),
    },
    // {
    //   key: '7',
    //   name: 'tab7',
    //   label: `进度信息`,
    //   content: <div style={{ height: 500 }}></div>,
    // },
  ];

  //选中selection中的序号
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
    },

    {
      title: '项目名称',
      dataIndex: 'projectName',
      // valueType: 'select',
      width: 200,
      align: 'center',
      sorter: true,
      // fieldProps: {
      //   options: ,
      // },
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '计划编号',
      dataIndex: 'batchPlanCode',
      width: 200,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '项目交付日期',
      dataIndex: 'batchDeliveryDate',
      width: 120,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      search: false,
    },
    // {
    //   title: '交付日期',
    //   dataIndex: 'batchDeliveryDate',
    //   valueType: 'dateRange',
    //   hideInTable: true,
    // },
    {
      title: 'C',
      dataIndex: 'cabinetCount',
      width: 50,
      align: 'center',
      sorter: true,
      search: false,
    },
    {
      title: 'P',
      dataIndex: 'operationCount',
      width: 50,
      search: false,
      align: 'center',
      sorter: true,
    },
    {
      title: 'B',
      dataIndex: 'boxCount',
      width: 50,
      search: false,
      align: 'center',
      sorter: true,
    },
    {
      title: 'others',
      dataIndex: 'othersCount',
      width: 70,
      search: false,
      align: 'center',
      sorter: true,
    },
    {
      title: '当前批次',
      dataIndex: 'currentBatch',
      width: 90,
      search: false,
      align: 'center',
      sorter: true,
      render: (text, record) => (
        <div>
          {text}/{record.batchCount}
        </div>
      ),
    },
    {
      title: '批次交付日期',
      dataIndex: 'stagePlanEndTime7',
      width: 120,
      search: false,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '状态',
      dataIndex: 'state',
      width: 60,
      search: false,
      align: 'center',
      sorter: true,
      render: (text) => <div>{text === -1 ? '暂停' : stateType[text]}</div>,
    },
    {
      title: '数量齐套率',
      dataIndex: 'numPercent',
      width: 120,
      search: false,
      align: 'center',
      sorter: true,
      render: (text,record) => {
        if(!isNaN(text)){
          return <div>{(Number(text)*100).toFixed(2) + '%'}</div>
        }
        else
        return <div>{text}</div>
      }
      // render: (text, record, _, action) => {
      //   return <div>100</div>;
      // },
    },
    {
      title: '种类齐套率',
      dataIndex: 'typePercent',
      width: 120,
      search: false,
      align: 'center',
      sorter: true,
      render: (text,record) => {
        if(!isNaN(text)){
          return <div>{(Number(text)*100).toFixed(2) + '%'}</div>
        }
        else
        return <div>{text}</div>
      }
    },
    {
      title: '实际工时(h)',
      dataIndex: 'realWorkHour',
      width: 100,
      search: false,
      align: 'center',
      sorter: true,
      // render: (text) => {
      //   return text === '-' ? Number(0).toFixed(2) + 'h' : Number(text).toFixed(2) + 'h';
      // },
      render: (text) => {
        return text === '-' ? Number(0).toFixed(2) : Number(text).toFixed(2);
      },
    },
    {
      title: '计划工时(h)',
      width: 100,
      align: 'center',
      sorter: true,
      search: false,
      dataIndex: 'workHour',
      render: (text) => {
        return text === '-' ? Number(0).toFixed(2) : Number(text).toFixed(2);
      },
      //
    },

    // {
    //   title: '批次总数',
    //   dataIndex: 'batchCount',
    //   width: 90,
    //  align: 'center',sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    {
      title: '标准工时(h)',
      dataIndex: 'realWorkHour',
      width: 90,
      search: false,
      align: 'center',
      sorter: true,
      render: (text) => {
        return text === '-' ? Number(0).toFixed(2) : Number(text).toFixed(2);
      },
    },
    {
      title: '实际工时(h)',
      dataIndex: 'workHour',
      width: 90,
      search: false,
      align: 'center',
      sorter: true,
      render: (text) => {
        return text === '-' ? Number(0).toFixed(2) : Number(text).toFixed(2);
      },
    },
    {
      title: `项目开工计划开始`,
      dataIndex: 'stagePlanStartTime1',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `项目开工计划结束`,
      dataIndex: 'stagePlanEndTime1',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `项目开工实际开始`,
      dataIndex: 'stageStartTime1',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `项目开工实际结束`,
      dataIndex: 'stageEndTime1',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `柜体设计计划开始`,
      dataIndex: 'stagePlanStartTime2',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `柜体设计计划结束`,
      dataIndex: 'stagePlanEndTime2',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },

    {
      title: `柜体设计实际开始`,
      dataIndex: 'stageStartTime2',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `柜体设计实际结束`,
      dataIndex: 'stageEndTime2',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `物料采购计划开始`,
      dataIndex: 'stagePlanStartTime3',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `物料采购计划结束`,
      dataIndex: 'stagePlanEndTime3',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `物料采购实际开始`,
      dataIndex: 'stageStartTime3',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `物料采购实际结束`,
      dataIndex: 'stageEndTime3',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },

    {
      title: `生产分料计划开始`,
      dataIndex: 'stagePlanStartTime4',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `生产分料计划结束`,
      dataIndex: 'stagePlanEndTime4',
      valueType: 'date',
      search: false,
      width: 80,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `生产分料实际开始`,
      dataIndex: 'stageStartTime4',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `生产分料实际结束`,
      dataIndex: 'stageEndTime4',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },

    {
      title: `生产装配计划开始`,
      dataIndex: 'stagePlanStartTime5',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `生产装配计划结束`,
      dataIndex: 'stagePlanEndTime5',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `生产装配实际开始`,
      dataIndex: 'stageStartTime5',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `生产装配实际结束`,
      dataIndex: 'stageEndTime5',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `打包入库计划开始`,
      dataIndex: 'stagePlanStartTime6',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `打包入库计划结束`,
      dataIndex: 'stagePlanEndTime6',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `打包入库实际开始`,
      dataIndex: 'stageStartTime6',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `打包入库实际结束`,
      dataIndex: 'stageEndTime6',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `发货日期计划开始`,
      dataIndex: 'stagePlanStartTime7',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `发货日期计划结束`,
      dataIndex: 'stagePlanEndTime7',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },

    {
      title: `发货日期实际开始`,
      dataIndex: 'stageStartTime7',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `发货日期实际结束`,
      dataIndex: 'stageEndTime7',
      valueType: 'date',
      width: 80,
      search: false,
      align: 'center',
      render: (text) => <>{Ellipsis(text)}</>,
    },
    // {
    //   title: `现场安装计划开始`,
    //   dataIndex: 'stagePlanStartTime8',
    //   valueType: 'date',
    //   width: 80,
    //   search: false,
    //   align: 'center',
    //   sorter: true,
    //   hideInTable: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: `现场安装计划结束`,
    //   dataIndex: 'stagePlanEndTime8',
    //   valueType: 'date',
    //   width: 80,
    //   search: false,
    //   align: 'center',
    //   hideInTable: true,
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },

    // {
    //   title: `现场安装实际开始`,
    //   dataIndex: 'stageStartTime8',
    //   valueType: 'date',
    //   width: 80,
    //   search: false,
    //   align: 'center',
    //   hideInTable: true,
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: `现场安装实际结束`,
    //   dataIndex: 'stageEndTime8',
    //   valueType: 'date',
    //   width: 80,
    //   hideInTable: true,
    //   search: false,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },

    // {
    //   title: `现场调试计划开始`,
    //   dataIndex: 'stagePlanStartTime9',
    //   valueType: 'date',
    //   width: 80,
    //   search: false,
    //   align: 'center',
    //   hideInTable: true,
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: `现场调试计划结束`,
    //   dataIndex: 'stagePlanEndTime9',
    //   valueType: 'date',
    //   width: 80,
    //   search: false,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },

    // {
    //   title: `现场调试实际开始`,
    //   dataIndex: 'stageStartTime9',
    //   valueType: 'date',
    //   width: 80,
    //   hideInTable: true,
    //   search: false,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: `现场调试实际结束`,
    //   dataIndex: 'stageEndTime9',
    //   valueType: 'date',
    //   width: 80,
    //   search: false,
    //   align: 'center',
    //   hideInTable: true,
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },

    // {
    //   title: `项目验收计划开始`,
    //   width: 80,
    //   dataIndex: 'stagePlanStartTime10',
    //   valueType: 'date',
    //   search: false,
    //   align: 'center',
    //   hideInTable: true,
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: `项目验收计划结束`,
    //   dataIndex: 'stagePlanEndTime10',
    //   valueType: 'date',
    //   width: 80,
    //   search: false,
    //   hideInTable: true,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },

    // {
    //   title: `项目验收实际开始`,
    //   dataIndex: 'stageStartTime10',
    //   valueType: 'date',
    //   width: 80,
    //   search: false,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: `项目验收实际结束`,
    //   dataIndex: 'stageEndTime10',
    //   valueType: 'date',
    //   width: 80,
    //   search: false,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: '备注',
    //   dataIndex: 'memo',
    //   width: 90,
    //  align: 'center',sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: '预留',
    //   dataIndex: 'reserved',
    //   width: 90,
    //  align: 'center',sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: '流水号',
    //   dataIndex: 'serialNo',
    //   width: 90,
    //  align: 'center',sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {  
    //   title: '创建日期', //表头显示的名称
    //   search: false,
    //   dataIndex: 'createTime',
    //   valueType: 'date',
    //   width: 110,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: '创建人', //表头显示的名称
    //   search: false,
    //   dataIndex: 'createName',
    //   width: 90,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      align: 'center',
      width: 80,
      render: (text, record, _, action) => [
        <a
          key="lookKey"
          onClick={async () => {
            // 获取项目编号
            const result_info = await getInfoByProjectCode(record.projectCode);
            setTeamId(result_info.data.teamId);
            setInfoId(result_info.data.id);
            setCreateOrUpdate(true);
            //第一个tab页，项目信息
            form.setFieldsValue({
              city: result_info.data.city,
              contactName: result_info.data.contactName,
              contactNo: result_info.data.contactNo,
              contractAmount: result_info.data.contractAmount,
              contractCode: result_info.data.contractCode,
              contractDate: dayjs(result_info.data.contractDate, dateFormat),
              contractName: result_info.data.contractName,
              contractState: result_info.data.contractState,
              country: result_info.data.country,
              customerAddress: result_info.data.customerAddress,
              customerCode: result_info.data.customerCode,
              customerName: result_info.data.customerName,
              deliveryAddress: result_info.data.deliveryAddress,
              deliveryDate:
                result_info.data.deliveryDate === null
                  ? null
                  : dayjs(result_info.data.deliveryDate, dateFormat),
              memo: result_info.data.memo,
              projectCode: result_info.data.projectCode,
              projectName: result_info.data.projectName,
              province: result_info.data.province,
              reserved: result_info.data.reserved,
              serialNo: result_info.data.serialNo,
              so: result_info.data.so,
              id: result_info.data.id,
            });
            //获取团队信息
            const result = await getProjectTeamInfos(result_info.data.id);
            if (result == undefined) {
              setTeamInfo();
            } else {
              setTeamInfo(result.data);
            }
            //获取付款信息
            const { data: feeResult } = await getPayInfoByInfoId(result_info.data.id);
            setFeeInfo(feeResult);
            const amount = result_info.data.contractAmount;
            const regex = /(\d+)/;
            const match = amount.match(regex);
            const number = match[1];
            feeForm.setFieldsValue({
              advancePay: feeResult.advancePay,
              advancePayDate:
                feeResult.advancePayDate && dayjs(feeResult.advancePayDate, dateFormat),
              finalPay: feeResult.finalPay,
              finalPayDate: feeResult.finalPayDate && dayjs(feeResult.finalPayDate, dateFormat),
              isInvoice: feeResult.isInvoice ? '是' : '否',
              stagePay: feeResult.stagePay,
              stagePayDate: feeResult.stagePayDate && dayjs(feeResult.stagePayDate, dateFormat),
              memo: feeResult.string,
              stagePayRate: feeResult.stagePay / Number(number),
              finalPayRate: feeResult.finalPay / Number(number),
              advancePayRate: feeResult.advancePay / Number(number),
            });
            setEditModalVisit(true);
          }}
        >
          查看
        </a>,
      ],
    },
  ];

  interface DataType {
    key: React.Key;
    productType: string;
    isStandard: number;
    unstandardName: string;
    productQty: number;
    batchProductId: string;
  }

  const col: ColumnsType<DataType> = [
    {
      title: '序号',
      key: 'key',
      dataIndex: 'key',
      width: 90,
      align: 'center',
      sorter: true,
    },
    {
      title: '柜体编号',
      key: 'productCode',
      dataIndex: 'productCode',
      width: 190,
      align: 'center',
      sorter: true,
    },
    {
      title: '柜体类型',
      key: 'productType',
      dataIndex: 'productType',
      width: 140,
      align: 'center',
      sorter: true,
    },
    {
      title: '标准柜体',
      key: 'isStandard',
      dataIndex: 'isStandard',
      width: 140,
      align: 'center',
      sorter: true,
      render: (text) => {
        return <div>{text === 1 ? '是' : '否'}</div>;
      },
    },
  ];

  // 环形图
  const data = [
    {
      type: '正常',
      value: wodata_forcard[3],
    },
    {
      type: '预警',
      value: wodata_forcard[4],
    },
    {
      type: '超期',
      value: wodata_forcard[5],
    },
  ];
  const config = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    color: ({ type }) => {
      if (type === '正常') {
        return '#389e0d';
      } else if (type === '预警') {
        return 'purple-retangle base-retangle';
      } else {
        return '#cf1322';
      }
    },
    radius: 1,
    innerRadius: 0.6,
    label: {
      type: 'inner',
      offset: '-50%',
      content: '{value}',
      style: {
        textAlign: 'center',
        fontSize: 0,
      },
      visible: false,
    },
    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          fontSize: 10,
        },
      },
    },
    legend: false,
    width: 180,
    height: 180,
  };

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <div style={{ marginBottom: '16px' }}>
        <div className="dcardsec">
          <div className="tag">项目进度</div>
          <Row
            gutter={16}
            align="middle"
            style={{ width: '300px', textAlign: 'center', height: '120px' }}
          >
            <Col
              span={8}
              style={{ cursor: 'pointer' }}
              onClick={() => {
                setstate('');
                setproject_list(true);
              }}
            >
              <div>
                <Statistic
                  value={project_process_forcard[0]}
                  valueStyle={{ fontSize: '30px', color: 'rgb(5, 92, 81)', fontWeight: '600' }}
                />
                <div className="sectitle">项目数量</div>
              </div>
            </Col>

            <Col
              span={8}
              style={{ cursor: 'pointer' }}
              onClick={() => {
                setstate('未结束'); //
                setproject_list(true);
              }}
            >
              <Statistic
                value={project_process_forcard[1]}
                valueStyle={{ fontSize: '30px', color: 'rgb(111, 0, 210)', fontWeight: '600' }}
              />
              <div className="sectitle">未结束</div>
            </Col>

            <Col
              span={8}
              style={{ cursor: 'pointer' }}
              onClick={() => {
                setstate('已结束');
                setproject_list(true);
              }}
            >
              <Statistic
                value={project_process_forcard[2]}
                valueStyle={{ fontSize: '30px', color: 'rgb(140, 234, 0)', fontWeight: '600' }}
              />
              <div className="sectitle">已结束</div>
            </Col>
          </Row>
        </div>

        {/* 工单进度 */}
        <div className="wo_cardsec" style={{ marginLeft: '12px' }}>
          <div className="main">
            <div className="head">工单进度</div>
            <div className="body">
              <div className="left_box" />
              <div className="left">
                <div className="left_top">
                  <div
                    className="left_top_number"
                    onClick={() => {
                      setcurrent_state('');
                      setcurrent_alert('');
                      actionRef.current!.reload();
                    }}
                  >
                    <span>{wodata_forcard[0]}</span>
                  </div>
                  <div className="left_text">工单数量</div>
                </div>
                <div className="left_bottom">
                  <div className="left_bottom1">
                    <div
                      className="left_bottom_number1"
                      onClick={() => {
                        setcurrent_state('未开始');
                        setcurrent_alert('');
                        actionRef.current!.reload();
                      }}
                    >
                      <span>{wodata_forcard[1]}</span>
                    </div>
                    <div className="left_bottom_text1">未开始</div>
                  </div>
                  <div className="left_bottom2">
                    <div
                      className="left_bottom_number2"
                      onClick={() => {
                        setcurrent_state('执行中'); //
                        setcurrent_alert('');
                        actionRef.current!.reload();
                      }}
                    >
                      <span>{wodata_forcard[2]}</span>
                    </div>
                    <div className="left_bottom_text2">执行中</div>
                  </div>
                </div>
              </div>
              <div className="chart">
                <Pie {...config} />
              </div>
              <div className="right">
                <div className="right1">
                  <div
                    className="right_number1"
                    onClick={() => {
                      setcurrent_alert('正常'); //
                      setcurrent_state('');
                      actionRef.current!.reload();
                    }}
                  >
                    <span>{wodata_forcard[3]}</span>
                  </div>
                  <div className="right_text">正常</div>
                </div>
                <div className="right2">
                  <div
                    className="right_number2"
                    onClick={() => {
                      setcurrent_alert('预警');
                      setcurrent_state('');
                      actionRef.current!.reload();
                    }}
                  >
                    <span>{wodata_forcard[4]}</span>
                  </div>
                  <div className="right_text">预警</div>
                </div>
                <div className="right3">
                  <div
                    className="right_number3"
                    onClick={() => {
                      setcurrent_alert('超期');
                      setcurrent_state('');
                      actionRef.current!.reload();
                    }}
                  >
                    <span>{wodata_forcard[5]}</span>
                  </div>
                  <div className="right_text">超期</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 异常处理 */}
        <div className="dcardsec" style={{ marginLeft: '12px' }}>
          <div className="tag">异常处理</div>
          <Row align="middle" style={{ width: '200px', textAlign: 'center', height: '120px' }}>
            <Col
              span={24}
              onClick={() => {
                setex_list(true);
              }}
            >
              <Statistic
                value={errordata[0] || 0}
                valueStyle={{ fontSize: '30px', color: '#FF4D4F', fontWeight: '600' }}
              />
              <div className="sectitle">异常处理</div>
            </Col>
          </Row>
        </div>

        {/* 变更数量 */}
        <div className="dcardsec" style={{ marginLeft: '12px' }}>
          <div className="tag">变更数量</div>
          <Row align="middle" style={{ width: '200px', textAlign: 'center', height: '120px' }}>
            <Col span={24}>
              <Statistic
                value={unreviewdata}
                valueStyle={{ fontSize: '30px', color: '#055C51', fontWeight: '600' }}
              />
              <div className="sectitle">未审批</div>
            </Col>
          </Row>
        </div>
      </div>

      <ProTable
        className="protable"
        headerTitle={'项目进度查询'}
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        search={batchPlanFlag}
        toolBarRender={(action, { selectedRows }) => []}
        request={async (params = {}, sort, filter) => {
          const sorters = sortTran(sort);
          const filters = filterTran(params);
          // const filters = filterTranNew(params);
          console.log('id', infoId, 'sort', sorters, 'params', filters);
          let result;
          result = await getBatchPlanAndStageByPage({
            current: 1,
            pageSize: 100000, //获得全部的数据
            sorters: sorters,
            filters: filters,
          });
          //数据改造
          const allTemp: any[] = [];
          let count = 0; //暂时的处理方法
          result.data.content.map((ele: any) => {
            const temp: any[] = [];
            if (ele != null) {
              count = count + 1;
              ele.planStagesEx.map((item: any) => {
                temp[`id${item.stageSort}`] = item.id;
                temp[`stageName${item.stageSort}`] = item.stageName;
                temp[`stageStartTime${item.stageSort}`] = item.stageStartTime;
                temp[`stageEndTime${item.stageSort}`] = item.stageEndTime;
                temp[`stagePlanStartTime${item.stageSort}`] = item.stagePlanStartTime;
                temp[`stagePlanEndTime${item.stageSort}`] = item.stagePlanEndTime;
              });
              temp.projectName = ele.batchPlanEx.projectName;
              temp.realWorkHour = ele.batchPlanEx.realWorkHour;
              temp.workHour = ele.batchPlanEx.workHour;
              temp.batchDeliveryDate = ele.batchPlanEx.batchDeliveryDate;
              temp.infoId = ele.batchPlanEx.infoId;
              temp.id = ele.batchPlanEx.id;
              temp.batchDeliveryDate = ele.batchPlanEx.batchDeliveryDate;
              temp.isReleased = ele.batchPlanEx.isReleased;
              temp.currentBatch = ele.batchPlanEx.currentBatch;
              // temp['batchCount'] = ele.batchPlanx.batchCount;
              temp.boxCount = ele.batchPlanEx.boxCount;
              temp.cabinetCount = ele.batchPlanEx.cabinetCount;
              temp.operationCount = ele.batchPlanEx.operationCount;
              temp.projectCode = ele.batchPlanEx.projectCode;
              temp.othersCount = ele.batchPlanEx.othersCount;
              temp.numPercent = ele.batchPlanEx.numPercent;
              temp.typePercent = ele.batchPlanEx.typePercent;
              temp.state = ele.batchPlanEx.state;
              temp.planReceiptStartDate = ele.batchPlanEx.planReceiptStartDate;
              temp.batchCount = ele.batchPlanEx.batchCount;
              temp.batchPlanCode = ele.batchPlanEx.batchPlanCode;
              temp.reserved = ele.batchPlanEx.reserved;
              temp.memo = ele.batchPlanEx.memo;
              temp.serialNo = ele.batchPlanEx.serialNo;
              temp.masterPlanId = ele.batchPlanEx.masterPlanId;
              allTemp.push(temp);
            }
          });
          console.log('获取到的数据', result, '有效', count);

          //await getPlanInfo();
          setTempDate(allTemp);
          // 获取项目进度（卡片信息）
          const card_data = await getInfoProgress(null);
          setproject_process_forcard(card_data.data);
          const error1 = await getErrorReportProgress(null);
          setError_data(error1.data);
          //console.log('获取到', error1, '设置', errordata);

          // 获取工单进度(卡片信息)
          const workOrderCard_res = await getWorkOrderInforProgress(null);
          setwodata_forcard(workOrderCard_res.data);

          // 获取未审批数量(卡片信息)
          const unreviewCard_res = await getUnReviewedProgress(null);
          console.log(unreviewCard_res);

          setunreviewdata_forcard(unreviewCard_res.data || 0);

          return {
            data: allTemp,
            total: allTemp.length, //暂时的处理方法，后期改掉
            success: result.success,
          };
        }}
        columns={columns}
        scroll={{ x: 2000, y: 300 }}
        rowSelection={{ onChange: onSelectChange }}
      />
      {/* 报表模块 */}
      <Card
        bodyStyle={{ padding: '0px 24px 12px 24px' }}
        bordered={false}
        style={{ marginBottom: '40px' }}
      >
        <div className="reportFormCardTitle">报表统计</div>
        <ReportForm />
      </Card>

      {/* 添加模块 */}
      <Modal
        title="项目看板-项目列表"
        visible={project_list}
        onOk={() => setproject_list(false)}
        confirmLoading={confirmLoading}
        onCancel={() => setproject_list(false)}
        width={1200}
      >
        <div style={{ height: 600, width: 1200 }}>
          <Info contractState={state} />
        </div>
      </Modal>
      <Modal
        title="项目看板-异常列表"
        visible={ex_list}
        onOk={() => setex_list(false)}
        confirmLoading={confirmLoading}
        onCancel={() => setex_list(false)}
        width={1200}
        footer={[]}
      >
        <ErrorReport />
      </Modal>
      <Modal
        title="项目信息"
        width={1500}
        open={editModalVisit}
        onCancel={() => {
          setEditModalVisit(false);
          actionRef.current?.reload();
        }}
        onOk={() => setEditModalVisit(false)}
        footer={null}
        destroyOnClose
      >
        <Tabs
          defaultActiveKey="0"
          items={items.map((item, i) => {
            const id = String(i + 1);
            return {
              label: item.label,
              key: id,
              children: <div>{item.content}</div>,
            };
          })}
          onChange={onChange}
        />
      </Modal>
    </PageHeaderWrapper>
  );
};
export default Projectboard;
